import {
  TDTImage,
  TDTImageMark,
  TDTVector,
  TDTVectorMark,
} from '@/dist/tianditu/tianditu.js'
import 'ol/ol.css'
import {
  Zoom,
  ZoomSlider,
  MousePosition,
  ScaleLine,
  OverviewMap,
  ZoomToExtent,
} from 'ol/control'
import { createStringXY } from 'ol/coordinate'
import { reactive } from 'vue'

// 初始化一个空地图
let map = reactive({})
let docLayer = reactive({})
let source = reactive({})
let lineLayer = reactive({})

export default function () {
  // 初始化地图函数
  function initMap() {
    // 创建一个地图
    map.value = new ol.Map({
      // 存放地图的容器
      target: 'map',
      // 设置图层
      layers: [TDTVector, TDTImage],
      // 设置视图
      view: new ol.View({
        center: [114.37, 30.5], // 中心点坐标
        zoom: 13, // 缩放等级
        projection: 'EPSG:4326', // 坐标系
      }),
      // 设置地图控件，值为一个数组
      controls: [
        new ol.control.ZoomToExtent({
          extent: [114.3210,30.4606,114.4135,30.5275],
        }),
        new ol.control.ZoomSlider(), // 缩放滑块
        new ol.control.ScaleLine({
          //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
          units: 'metric',
        }),
        new ol.control.MousePosition({
          //坐标格式
          coordinateFormat: ol.coordinate.createStringXY(4),
          //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
          projection: 'EPSG:4326',
          //坐标信息显示样式类名，默认是'ol-mouse-position'
          className: 'custom-mouse-position',
          //显示鼠标位置信息的目标容器
          target: document.getElementById('position'),
          //未定义坐标的标记
          undefinedHTML: '&nbsp;',
        }),
        new ol.control.OverviewMap({
          //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
          className: 'ol-overviewmap ol-custom-overviewmap',
          //鹰眼中加载同坐标系下不同数据源的图层
          layers: [TDTVector, TDTImage],
          //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
          collapseLabel: '\u00BB',
          //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
          label: '\u00AB',
          //初始为展开显示方式
          collapsed: false,
          view: new ol.View({
            projection: 'EPSG:4326',
            minZoom: 4,
            // maxZoom:8
          }),
        }),
      ],
    })

    docLayer.value = new Zondy.Map.Doc('', 'smartRoad', {
      ip: 'localhost',
      port: 6163,
      // 解决跨域
      // crossOrigin: 'Anonymous',
    })
    map.value.addLayer(docLayer.value)
    // return map

    // 添加绘制缓冲区分析线的图层
    lineLayer.value = new Zondy.Map.Doc('', 'LineLayer', {
      id: 'localhost',
      port: 6163,
    })
    map.value.addLayer(lineLayer.value)

    //放置交互式画笔图层
    source.value = new ol.source.Vector({
      wrapX: false,
      // 解决跨域
      crossOrigin: 'Anonymous',
    })
    let layer = new ol.layer.Vector({
      source: source.value,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgb(52, 238, 249)',
          width: 4,
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.5)',
        }),
      }),
    })
    map.value.addLayer(layer)
  }

  //切换底图
  const changeLayer = (layer) => {
    const layers = map.value.getLayers().getArray().slice(0, 2)
    layers.forEach((item) => {
      if (item.values_.title == layer) {
        item.setVisible(true)
      } else {
        item.setVisible(false)
      }
    })
  }

  return { initMap, changeLayer, map, docLayer, lineLayer, source }
}
